<template>
  <div class="header">
    <div class="search_box">
      <van-icon name="scan" class="scan"/>
      <van-search v-model="value" placeholder="请输入搜索关键词"  show-action shape="round">
        <div slot="action" @click="onSearch">
          <van-icon name="chat-o" class="chat"/>
        </div>
      </van-search>
    </div>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      images: [
        "http://www.nrbnrd.com/uploads/20190601/3a68d2a725dc8de48a724ee3640bf7c4.jpg",
        "http://www.nrbnrd.com/uploads/20190601/4736b080e3eb87651cfaddde321add75.jpg",
        "http://www.nrbnrd.com/uploads/20190601/612fdadf5342fdb4e406c02385d1cca7.jpg",
        "http://www.nrbnrd.com/uploads/20190601/64b7fedda45b7c6e43172574d5713450.jpg"
       
      ]
    };
  },
  methods: {
    onSearch() {
      console.log("等着在做");
    }
  }
};
</script>

<style>
.header .search_box {
  width: 100%;
  position: fixed;
  top: 0;
  background: rgba(236, 240, 241,0.6);
  z-index: 99;
}
.header .chat {
  font-size: 20px;
  padding-top: 13px;
  color: black;
}
.header .scan {
  float: left;
  font-size: 20px;
  padding-top: 20px;
  padding-left: 10px;
  color: black;
}
.header .van-search {
  background: transparent !important;
}
.header .van-search__content {
  background: rgba(255,255,255,0.7);
}
.header img {
  height: 200px;
  width: 100%;
}
.header .van-swipe__indicators{
  bottom: 10px;
}
</style>
